<script setup>
	import {
		ref
	} from 'vue'

	const tabStatus = ref("login")
</script>

<template>
	<!-- <scroll-view enable-back-to-top class="viewport" scroll-y> -->
	<view class="background-img">
		<image src="/static/center_bg.png" style="width: 100%;"></image>
	</view>
	<!-- 头像 -->
	<view class="overview">
		<image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
	</view>
	<view class="viewport">
		<view class="logReg">
			<view class="tab">
				<view :class="tabStatus == 'login' ? 'login' : 'register'" @click="tabStatus = 'login'">
					登录
				</view>
				<view :class="tabStatus == 'register' ? 'login' : 'register'" @click="tabStatus = 'register'">
					注册
				</view>
			</view>
			<view class="logRegForm" v-if="tabStatus == 'login'">
				<view class="formRow">
					<view class="title">
						<span style="color: red;">*</span>
					</view>
					<uni-easyinput class="inputText" type="text" value="" placeholder="请输入账号" />
				</view>
				<view class="formRow">
					<view class="title">
						<span style="color: red;">*</span>
					</view>
					<uni-easyinput class="inputText" type="text" value="" placeholder="请输入账号" />
				</view>
				<button class="loginbtn" type="submit">登录</button>
				<view class="quicklogindesc">
					快速登录
				</view>
				<view class="divider"></view>
				<view class="quickLogin">
					<image class="loginImg" src="/static//loginbar/phone.png" mode=""></image>
					<image class="loginImg" src="/static//loginbar/weixin.png" style="padding: 0rpx 30rpx;" mode=""></image>
					<image class="loginImg" src="/static//loginbar/zfb.png" mode=""></image>
				</view>
			</view>
			<view class="logRegForm" v-else>
				<view class="formRow">
					<view class="title">
						<span style="color: red;">*</span>
					</view>
					<uni-easyinput class="inputText" type="text" value="" placeholder="请输入账号" />
				</view>
				<view class="formRow">
					<view class="title">
						<span style="color: red;">*</span>
					</view>
					<uni-easyinput class="inputText" type="text" value="" placeholder="请输入密码" />
				</view>
				<view class="formRow">
					<view class="title">
						<span style="color: red;">*</span>
					</view>
					<uni-easyinput class="inputText" type="text" value="" placeholder="请再次输入密码" />
				</view>
				<button class="loginbtn" type="submit" style="margin-bottom: 80rpx;">注册</button>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.background-img {
		position: relative;
		z-index: 1;
	}

	.overview {
		// display: flex;
		//#00c6a2
		width: 100%;
		position: absolute;
		z-index: 99;
		top: 90px;
		text-align: center;

		// height: 120rpx;
		// padding: 0 36rpx;
		// color: #fff;
		.avatar {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			background-color: #eee;
		}
	}

	.viewport {
		width: 100%;
		// height: 200px;
		position: absolute;
		z-index: 99;
		top: 230px;

		.logReg {
			// position: relative;
			// z-index: 99;
			// top: 100px;
			// width: 100%;
			box-sizing: border-box;
			// justify-content: center;
			// padding: 30rpx;
			margin: 50rpx 30rpx 0;
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 0 10rpx 10rpx rgba(240, 240, 240, 0.6);

			.tab {
				display: flex;
				flex-direction: row;
				font-size: 35rpx;

				.login {
					width: 50%;
					text-align: center;
					padding: 20rpx;
					box-shadow: 10rpx 0rpx 10rpx 0rpx rgba(240, 240, 240, 0.6);
				}

				.register {
					width: 50%;
					text-align: center;
					padding: 20rpx;
					background-color: #00c8a4;
					// background-color: #c2ece5;
				}
			}

			.logRegForm {
				padding-top: 30rpx;
				padding-bottom: 80rpx;

				.formRow {
					display: flex;
					flex-direction: row;
					padding: 30rpx 80rpx;

					.title {
						text-align: center;
						display: flex;
						align-items: center;
					}

					.inputText {
						margin-left: 30rpx;
						border-radius: 20rpx;
						border-color: #00c8a4;
						height: 30px;
					}
				}

				.loginbtn {
					background-color: #00c8a4;
					margin: 30rpx 80rpx;
				}

				.divider {
					height: 1px;
					/* 分割线的高度 */
					background-color: rgb(200, 200, 200);
					/* 分割线的颜色 */
					// width: 80%;
					/* 分割线的宽度，这里设置为100% */
					margin: 80rpx;
				}
				.quickLogin {
					width: 100%;
					text-align: center;
					padding-bottom: 80rpx;
					.loginImg {
						width: 100rpx;
						height: 100rpx;
					}
				}
			}
		}
	}
</style>